import React, { useMemo } from 'react';
import { Category, ResourceItem } from '@/ui-components/common';
import { firstLetterToLowerCase } from '@/utils/tool';
import { Tooltip } from 'antd';
import './index.less';

type ResourceItemRenderProps = {
  item: ResourceItem;
  onAdd?: Function;
  onView?: Function;
};
interface QuestionRenderProps {
  actions: React.ReactNode;
}
const QuestionRender = (props: QuestionRenderProps) => {
  const { actions } = props;
  return (
    <div
      className="ib bdrs8 overflow-hidden"
      style={{ width: 268, height: 178 }}
    >
      <div
        className="lh28 white px8"
        style={{ backgroundColor: 'rgba(102, 102, 102, .79)' }}
      >
        单选选择题
      </div>
      <div className="relative resourceItem bg-white" style={{ height: 150 }}>
        <div
          className="resourceActions absolute left-0 bottom-0 w100p px8 flex justify-right lh28 white"
          style={{ backgroundColor: 'rgba(67, 101, 162, 0.79)' }}
        >
          {actions}
        </div>
      </div>
    </div>
  );
};
interface CardRenderProps extends ResourceItem {
  thumb: string;
  actions: React.ReactNode;
}
const CardRender = (props: CardRenderProps) => {
  const { category, resourceType, name, thumb, actions } = props;
  const defaultAvatar = require(`@/assets/${category}/${firstLetterToLowerCase(
    resourceType,
  )}.png`);
  return (
    <>
      <div
        className="relative resourceItem bdrs8"
        style={{ width: 128, height: 96 }}
      >
        <div
          className="w100p h100p bg-cover bg-norepeat bg-center"
          style={{ backgroundImage: `url(${thumb || defaultAvatar})` }}
        ></div>
        <div
          className="resourceActions absolute left-0 bottom-0 w100p px8 flex justify-right lh28 white"
          style={{ backgroundColor: 'rgba(67, 101, 162, 0.79)' }}
        >
          {actions}
        </div>
      </div>
      <Tooltip title={name}>
        <div className="mt4 oneLine" style={{ width: 128 }}>
          {name}
        </div>
      </Tooltip>
    </>
  );
};
const ResourceItemRender = (props: ResourceItemRenderProps) => {
  const { item, onView, onAdd } = props;
  const { category, type, config } = item;
  const { name, thumb, resourceType } = config;
  const actions = useMemo(
    () => (
      <>
        <div
          className="flex items-center"
          onClick={() => onView && onView(item)}
        >
          <span className="iconfont icon-chakan"></span>
          <span className="ml2">查看</span>
        </div>
        <div
          className="ml10 flex items-center"
          onClick={() => onAdd && onAdd(item)}
        >
          <span className="iconfont icon-tianjia"></span>
          <span className="ml2">添加</span>
        </div>
      </>
    ),
    [item, onView, onAdd],
  );
  const renderContent = useMemo(() => {
    switch (resourceType) {
      case 'Question':
        return <QuestionRender actions={actions} />;
      default:
        return (
          <CardRender
            category={category}
            resourceType={resourceType}
            type={type}
            name={name}
            thumb={thumb}
            actions={actions}
          />
        );
    }
  }, [category, resourceType, type, name, thumb, actions]);
  return <div className="pointer">{renderContent}</div>;
};

export default ResourceItemRender;
